<template>
  <div class="relativeContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="relativeMain">
      <el-card style="background: black;">
        <div class="content">
          <el-form label-width="150px">
            <el-form-item label="主人公：" style="margin-top: 20px;" prop="content">
              <el-input show-word-limit v-model="options.target" placeholder="请输入要查询的角色，默认为自己" maxlength="100" style="width: 400px;height: 40px;" />
            </el-form-item>
            <el-form-item label="与主人公的关系：" style="margin-top: 20px;" prop="content">
              <el-input show-word-limit v-model="options.text" placeholder="请用 的 格式输入，例如（妈妈的妈妈）" maxlength="100" style="width: 400px;height: 40px;" />
            </el-form-item>
            <el-form-item  style="margin-top: 20px;" label="性别：" prop="accessRights">
              <el-radio-group v-model="options.sex">
                <el-radio :label="1" style="margin-right: 20px;">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-top: 20px;" label="介质：" prop="location">
              <el-select v-model="options.type" placeholder="请选择介质" :no-data-text="'无数据'" style="width: 400px;height: 40px;">
                <el-option label="称谓" value="default"
                  style="padding-left: 10px;padding-top: 8px;"
                >
                </el-option>
                <el-option label="关系" value="chain"
                  style="padding-left: 10px;padding-top: 8px;"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-top: 20px;" label="方向：" prop="location">
              <el-select v-model="options.reverse" placeholder="请选择方向" :no-data-text="'无数据'" style="width: 400px;height: 40px;">
                <el-option label="正向" :value="false"
                  style="padding-left: 10px;padding-top: 8px;"
                >
                </el-option>
                <el-option label="反向" :value="true"
                  style="padding-left: 10px;padding-top: 8px;"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item style="width: 92%;margin-top: 50px;">
              <el-button type="warning" style="width: 160px;height: 45px;border-radius: 8px;font-size: 16px;" @click="onturn">
                计算
              </el-button>
              <el-button type="danger" style="width: 110px;height: 45px;border-radius: 8px;font-size: 16px;" @click="clean">
                重置
              </el-button>
            </el-form-item>
          </el-form>
          <div class="family">
            <SvgIcon width="150px" height="150px" name="family"></SvgIcon>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import relationship from 'relationship.js'

const route = useRoute()
const router = useRouter()

const relative = ref<string>('')

// 自定义模式
// 【关系链】f:父,m:母,h:夫,w:妻,s:子,d:女,xb:兄弟,ob:兄,lb:弟,xs:姐妹,os:姐,ls:妹
// 【修饰符】 1:男性,0:女性,&o:年长,&l:年幼,#:隔断,[a|b]:并列
relationship.setMode('northern',{
    'm,f': ['姥爷'],
    'm,m': ['姥姥'],
    'm,xb,s&o': ['表哥'],
    'm,xb,s&l': ['表弟'],
})

const options = ref<any>({
    text: '',        //输入文本(称谓的汉字表达，称谓间用‘的’字分隔)
    target: '',            //针对对象：空表示自己
    sex: 1,            //自己的性别：0女性,1男性
    type: 'default',    //转换类型：'default'计算称谓,'chain'计算关系
    reverse: false,        //称呼方式：true对方称呼我,false我称呼对方
    mode: 'default'        //模式选择，可由用户自定义
})
// 如：我应该叫外婆的哥哥什么？
// console.log(relationship({ text: '妈妈的妈妈的哥哥' })) // [ '外舅公' ]

const onturn = () => {
  if (options.value.text == '') {
    ElMessage({
      type: 'warning',
      message: '请输入与主人公的关系'
    })
    return
  }
  console.log('1', options.value)
  options.value.result = relationship(options.value)
  ElMessageBox.confirm(`查询结果为：${options.value.result}`, {
    type: 'warning',
    confirmButtonText: '确定',
    showClose: false,
    showCancelButton: false,
    closeOnClickModal: false,
  })
    .then(() => {

    })
    .catch((e) => e)
}

const clean = () => {
  options.value.text = '',        //输入文本(称谓的汉字表达，称谓间用‘的’字分隔)
  options.value.target = '',            //针对对象：空表示自己
  options.value.sex = 1,            //自己的性别：0女性,1男性
  options.value.type = 'default',    //转换类型：'default'计算称谓,'chain'计算关系
  options.value.reverse = false,        //称呼方式：true对方称呼我,false我称呼对方
  options.value.mode = 'default'        //模式选择，可由用户自定义
}

onMounted(() => {
  console.log('relationship', relationship)
})

</script>

<style lang="scss" scoped>
.relativeContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .relativeMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        position: relative;
        :deep(.el-input__wrapper) {
          width: 300px;
          height: 40px;
        }
        .family {
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
      }
    }
  }

}
</style>